<template>
	<view>
		<n-car :item="item"></n-car>
		<view class="pic-list" v-if="item.car">
			<view class="title">
				九视图：
			</view>
			<view class="list">
				<view class="item" v-for="(_item,i) in item.images" :key="i">
					<u-image @click="$tools.previewImg(item.images,i)" width="220" height="220" border-radius="8rpx"
						:src="_item"></u-image>
				</view>
			</view>
			<block v-if="item.car">
				<block v-if="item.car.video!=''">
					<view class="title">
						车辆视频（打开所有车门，后备箱，绕车一周）
					</view>
					<video :src="item.car.video" :show-mute-btn="true"></video>
				</block>
			</block>
		</view>
		<view class="info">
			<view class="order-status">
				<view class="">
					<view class="title-1">
						包车简介
					</view>
					<view class="desc">
						{{item.introduction}}
					</view>
					<view class="mt-10">
						<u-icon name="eye" size="30" color="#cccccc"></u-icon>
						<text class="pl-5 size-30 gray-9 text-normal">{{item.pageviews}}</text>
					</view>
					<view class="flex-between mt-30">
						<view class="flex">
							<view class="mobile">
								{{item.mobile}}
							</view>
							<image @click="$tools.makePhone(item.mobile)" class="icon-44 mx-50"
								src="../../static/btn_mobile.png" mode=""></image>
							<image @click="joinGroup(item.im_group_id)" class="icon-44" src="../../static/btn_chat.png"
								mode=""></image>
						</view>
						<n-tousu :order_id="id" type="2"></n-tousu>
					</view>
				</view>
			</view>
		</view>
		<n-user-comment v-if="item.user" :user="item.user" :user_id="item.user_id" :list="commentList" :status="status">
		</n-user-comment>
		<!-- <view class="comment">
			<view class="title-1">
				别人对TA的评论
				<view class="user-info">
					<image class="icon-32" src="../../static/btn_like.png" mode="widthFix"></image>
					<view class="text">
						{{item.like_num}}
					</view>
					<image class="icon-32" src="../../static/btn_no_like.png" mode="widthFix"></image>
					<view class="text">
						{{item.nolike_num}}
					</view>
				</view>
			</view>
			<view class="badge">
				<view class="item" v-for="item in tagList" :key="item.id">
					{{item.name}} +{{item.num}}
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(_item,i) in commentList" :key="i">
					<u-avatar size="72" :src="_item.avatar"></u-avatar>
					<view class="pl-20 flex-1">
						<view class="name">{{_item.nickname}}</view>
						<view class="desc">{{_item.content}}</view>
					</view>
				</view>
				<u-loadmore :status="status"></u-loadmore>
			</view>
		</view> -->
		<!-- 底部操作栏 -->
		<view class="tabbar-bottom">
			<view class="menu">
				<button class="item" open-type="share">
					<image class="icon-44" src="../../static/btn_share.png" mode="widthFix"></image>
					<view class="title">
						分享车辆
					</view>
				</button>
				<view class="item" @click="$tools.makePhone(item.mobile)">
					<image class="icon-44" src="../../static/btn_mobile.png" mode="widthFix"></image>
					<view class="title">
						拨打电话
					</view>
				</view>
				<view class="item" @click="joinGroup(item.im_group_id)">
					<image class="icon-44" src="../../static/btn_chat.png" mode="widthFix"></image>
					<view class="title">
						加入群聊
					</view>
				</view>
				<view class="item" @click="collect">
					<image v-if="item.sc==0" class="icon-44" src="../../static/btn_collect_1.png" mode="widthFix">
					</image>
					<image v-if="item.sc==1" class="icon-44" src="../../static/btn_collect.png" mode="widthFix"></image>
					<view class="title">
						收藏
					</view>
				</view>
			</view>
			<view class="btn" @click="submit">
				立即预约
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				item: '',
				tagList: [],
				page: 1,
				commentList: [],
				status: 'loading', //loadmore loading / nomore
			};
		},
		onLoad(e) {
			this.id = e.id
			this.getDetail()
		},
		onReachBottom() {
			if (this.status === 'nomore') {
				return
			}
			this.page++
			this.status = 'loading'
			this.getCommentList()
		},
		methods: {
			joinGroup(groupID) {
				console.log(groupID)
				if (!groupID) {
					this.$tools.toast('加群失败，请稍后重试')
					return
				}
				console.log(groupID)
				let promise = this.tim.joinGroup({
					groupID,
					type: this.TIM.TYPES.GRP_PUBLIC
				});
				promise.then((imResponse) => {
					switch (imResponse.data.status) {
						case this.TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
							console.log(imResponse.data.group); // 加入的群组资料
							uni.navigateTo({
								url: `/pages_message/chatRoom/chatRoom?userID=${groupID}&type=GROUP`
							})
							break;
						case this.TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
							uni.navigateTo({
								url: `/pages_message/chatRoom/chatRoom?userID=${groupID}&type=GROUP`
							})
							console.log(imResponse.data.group); // 加入的群组资料
							break;
						default:
							break;
					}
				}).catch(function(imError) {
					console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
				});

			},
			collect() {
				this.$api.collectionChartered({
					chartered_id: this.id
				}).then(res => {
					this.$tools.toast(res.msg)
					if (res.code == 1) {
						this.item.sc = !this.item.sc
					}
				})
			},
			getTagsList() {
				this.$api.getUserCenterTags({
					user_id: this.item.user_id,
				}).then(res => {
					if (res.code == 1) {
						this.tagList = res.data
					}
				})
			},
			getCommentList() {
				this.$api.getUserCenterCommentList({
					user_id: this.item.user_id,
					page: this.page
				}).then(res => {
					if (res.code == 1) {
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						this.commentList.push(...res.data.data)
					}
				})
			},

			getDetail() {
				this.$api.myCharteredDetail({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.item = res.data
						this.getTagsList()
						this.getCommentList()
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			submit() {
				uni.navigateTo({
					url: './payment?id=' + this.id
				})
			},
			openMap() {
				let location_list = []
				location_list.unshift(...this.item.start)
				location_list.push(...this.item.way)
				location_list.push(...this.item.end)
				uni.setStorageSync('location_list', location_list)
				uni.navigateTo({
					url: '/pages_release/map/map'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.cell {
		padding: 0 30upx;
		background: #ffffff;

		.item:not(:last-child) {
			border-bottom: 1upx solid #efefef;
		}

		.item {
			padding: 48upx 0;
			@include flex-between;

			.title {
				font-size: 28upx;
				font-weight: bold;
				line-height: 1;
				color: #999999;
				white-space: nowrap;
				padding-right: 30upx;
			}

			.name {
				font-size: 30upx;
				font-weight: bold;
				line-height: 1;
				color: #141414;
			}
		}
	}

	.pic-list {
		border-top: 16upx solid #f5f5f5;
		padding: 0 30upx 1upx;
		background: #fff;

		.title {
			font-size: 32upx;
			font-weight: 500;
			color: #333333;
			margin: 40upx 0 30upx;
		}

		.list {
			@include menu-list(3);
			flex-wrap: wrap;

			.item {
				margin-bottom: 15upx;
			}
		}

		video {
			width: 690upx;
			height: 406upx;
			border-radius: 8upx;
		}

		.n-btn-primary {
			margin: 50upx auto 60upx;
		}
	}


	.info {
		padding: 0 30upx;
		background: #fff;

		.order-status {
			padding: 30upx 0;
			border-bottom: 1upx solid #EFEFEF;
			line-height: 1;

			.title-1 {
				font-size: 26upx;
				font-weight: bold;
				color: #333333;
			}

			.desc {
				font-size: 30upx;
				line-height: 45upx;
				color: #333333;
				margin-top: 20upx;
				word-break: break-all;
			}

			.mobile {
				font-size: 30upx;
				font-weight: bold;
				color: #141414;
			}
		}



		.car-info {
			padding: 30upx 0;

			.item {
				@include flex-between;

				.title {
					font-size: 30upx;
					line-height: 60upx;
					color: #999999;
				}

				.text {
					font-size: 28upx;
					font-weight: bold;
					color: #333333;
				}
			}
		}

	}

	// .comment {
	// 	margin-top: 16upx;
	// 	padding: 40upx 30upx;
	// 	background: #fff;

	// 	.user-info {
	// 		@include flex;

	// 		.name {
	// 			font-size: 32upx;
	// 			font-weight: 500;
	// 			color: #333333;
	// 			margin-left: 20upx;
	// 			flex: 1;
	// 		}

	// 		.text {
	// 			font-size: 18upx;
	// 			color: #999999;
	// 			margin-left: 8upx;
	// 		}

	// 		image {
	// 			margin-left: 60upx;
	// 		}
	// 	}

	// 	.title-1 {
	// 		font-size: 30upx;
	// 		font-weight: 500;
	// 		color: #333333;
	// 		margin: 0 0 30upx;
	// 		@include flex-between;
	// 	}

	// 	.badge {
	// 		@include flex;
	// 		flex-wrap: wrap;
	// 		margin-bottom: 20upx;

	// 		.item {
	// 			text-align: center;
	// 			min-width: 205upx;
	// 			line-height: 48upx;
	// 			background: #EDF5F1;
	// 			border-radius: 24upx;
	// 			font-size: 26upx;
	// 			color: #519D76;
	// 			margin-right: 20upx;
	// 			margin-bottom: 20upx;
	// 		}
	// 	}

	// 	.list {
	// 		padding-bottom: 100upx;

	// 		.item {
	// 			display: flex;
	// 			border-bottom: 1upx solid #EFEFEF;
	// 			padding-bottom: 40upx;
	// 			margin-bottom: 40upx;

	// 			.name {
	// 				font-size: 30upx;
	// 				color: #7B7B7B;
	// 			}

	// 			.desc {
	// 				font-size: 30upx;
	// 				line-height: 45upx;
	// 				color: #333333;
	// 			}
	// 		}
	// 	}
	// }

	.tabbar-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		@include flex;
		padding: 20upx 30upx;
		background: #fff;
		border-top: 1upx solid #EFEFEF;

		.menu {
			@include flex-between;
			padding-right: 40upx;
			text-align: center;
			flex: 1;

			.item {
				line-height: 1.6;
				background-color: #fff;
				padding-left: 0;
				padding-right: 0;
				margin: 0;
			}

			.item:after {
				border: 0;
			}

			.title {
				font-size: 24upx;
				color: #999999;
			}
		}

		.btn {
			font-size: 30upx;
			font-weight: 500;
			color: #FFFFFF;
			width: 243upx;
			line-height: 80upx;
			background: #519D76;
			border-radius: 40upx;
			text-align: center;
		}
	}
</style>
